<template>
  <div>
    <div>
      <SideBar />
      <HeaderNav />
      <div class="app-main">
        <div class="banner-mian">
          <div class="left">
            <div class="banner">
              <div class="pic">
                <img
                  src="http://www-wms-java.itheima.net/img/dashboard-banner-left@2x.5afd2949.png"
                  alt=""
                />
                <img
                  class="headsculpture"
                  src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
                  alt=""
                />
                <h2>仓库管理员</h2>
              </div>
              <div class="text">
                <p>我不是为了输赢，我就是认真</p>
                <p class="text-p">——罗永浩</p>
              </div>
              <div class="totalwarehouse">
                <img
                  class="pic1"
                  src="http://www-wms-java.itheima.net/img/dashboard-banner-right@2x.28195570.png"
                  alt=""
                />
                <div class="beijing">北京总仓</div>
              </div>
            </div>
            <div class="backlog-info">
              <h3>待办信息</h3>
              <div class="info-list">
                <div class="list">
                  <div style="display: flex">
                    <img
                      src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
                      alt=""
                    />
                    <span class="span-list">入库单</span>
                  </div>
                  <div class="xinzeng">
                    <span>新增{{ todoList[0].value1 }}</span>
                    <span style="margin-left: 50px"
                      >待审核{{ todoList[0].value2 }}</span
                    >
                  </div>
                </div>
                <div class="list">
                  <div style="display: flex">
                    <img
                      src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
                      alt=""
                    />
                    <span class="span-list">出库单</span>
                  </div>
                  <div class="xinzeng">
                    <span>新增{{ todoList[1].value1 }}</span>
                    <span style="margin-left: 50px"
                      >待审核{{ todoList[1].value2 }}</span
                    >
                  </div>
                </div>
                <div class="list">
                  <div style="display: flex">
                    <img
                      src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
                      alt=""
                    />
                    <span class="span-list">盘点单</span>
                  </div>
                  <div class="xinzeng">
                    <span>新增{{ todoList[2].value1 }}</span>
                    <span style="margin-left: 50px"
                      >待审核{{ todoList[2].value2 }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="right"
            style="
              padding-left: 20px;
              padding-right: 20px;
              background-color: #fff;
            "
          >
            <h2 style="border-bottom: 1px solid #ccc; line-height: 40px">
              通知/公告
            </h2>
            <div style="border-bottom: 1px solid #ccc; line-height: 23px">
              <p style="font-size: 14px">紧急盘点通知</p>
              <span style="color: #ccc">2020.12.30 18:23:14</span>
            </div>
            <div style="border-bottom: 1px solid #ccc; line-height: 23px">
              <p style="font-size: 14px">运维服务更新通知</p>
              <span style="color: #ccc">2021.01.25 18:23:14</span>
            </div>
            <div style="border-bottom: 1px solid #ccc; line-height: 23px">
              <p style="font-size: 14px">客户入库变更通知</p>
              <span style="color: #ccc">2021.01.26 18:23:14</span>
            </div>
            <div style="border-bottom: 1px solid #ccc; line-height: 23px">
              <p style="font-size: 14px">五一放假通知</p>
              <span style="color: #ccc">2021.02.15 18:23:14</span>
            </div>
            <div style="border-bottom: 1px solid #ccc; line-height: 23px">
              <p style="font-size: 14px">品达物流系统对接通知</p>
              <span style="color: #ccc">2021.3.25 18:23:14</span>
            </div>
          </div>
        </div>
        <div class="mission-navigation">
          <h3>任务导航</h3>
          <div class="mission">
            <div class="navigation">
              <div style="display: flex">
                <img
                  src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
                  alt=""
                />
                <p style="margin-top: 30px; margin-left: 20px; font-size: 16px">
                  收货任务
                </p>
              </div>
            </div>
            <div class="navigation">
              <div style="display: flex">
                <img
                  src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
                  alt=""
                />
                <p style="margin-top: 30px; margin-left: 20px; font-size: 16px">
                  收货任务
                </p>
              </div>
            </div>
            <div class="navigation">
              <div style="display: flex">
                <img
                  src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
                  alt=""
                />
                <p style="margin-top: 30px; margin-left: 20px; font-size: 16px">
                  收货任务
                </p>
              </div>
            </div>
            <div class="navigation">
              <div style="display: flex">
                <img
                  src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
                  alt=""
                />
                <p style="margin-top: 30px; margin-left: 20px; font-size: 16px">
                  收货任务
                </p>
              </div>
            </div>
            <div class="navigation">
              <div style="display: flex">
                <img
                  src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
                  alt=""
                />
                <p style="margin-top: 30px; margin-left: 20px; font-size: 16px">
                  收货任务
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="Intothewarehouse">
          <div class="box-btn">
            <button class="btn">本周</button>
            <button class="btn">本月</button>
            <button class="btn">全年</button>
          </div>
          <div ref="box2" class="chart-box3" style="height: 300px"></div>
        </div>
        <div class="servicecondition">
          <div class="servicecondition-left">
            <div ref="box" class="chart-box1" style="height: 300px"></div>
          </div>
          <div class="servicecondition-right">
            <div ref="box1" class="chart-box2" style="height: 300px"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SideBar from '@/components/SideBar.vue'
import HeaderNav from '@/components/HeaderNav.vue'
import * as echarts from 'echarts'
import { getTodo, getStockUseStatus } from '@/api/homepage'
export default {
  name: 'DashBoard',
  components: {
    SideBar,
    HeaderNav
  },
  data () {
    return {
      todoList: [
        {
          name: '入库单',
          value1: 9,
          value2: 0
        },
        {
          name: '出库单',
          value1: 0,
          value2: 0
        },
        {
          name: '盘点单',
          value1: 0,
          value2: 0
        }
      ],
      StatusList: []
    }
  },
  async created () {
    this.getTodoList() // 待办信息
    this.getStockUseStatusList() // 库存使用情况
  },
  methods: {
    async getTodoList () {
      const { data } = await getTodo() // 待办信息
      // console.log(data)
      this.todoList = data
    },
    async getStockUseStatusList () {
      const { data } = await getStockUseStatus() // 库存使用情况
      // console.log('data', data)
      this.StatusList = data
      let total = 0
      this.StatusList.forEach((item) => {
        total += item.value
      })
      console.log(total)
      this.StatusList.forEach((item) => {
        item.value = (item.value / total) * 100
        console.log(item.value)
        item.value = item.value.toFixed(2)
      })
      const myChart = echarts.init(this.$refs.box)
      myChart.setOption({
        title: {
          text: '库存使用情况',
          left: 10,
          top: 20
        },
        color: ['#FFAA00', '#E4DBDA'],
        tooltip: {
          trigger: 'item',
          valueFormatter: (value) => value + '%'
        },
        grid: { top: '6%', bottom: '50%', containLabal: true },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.StatusList
          }
        ]
      })
    }
  },
  mounted () {
    const myChart1 = echarts.init(this.$refs.box1)
    myChart1.setOption({
      title: {
        text: '库存使用情况',
        left: 10,
        top: 10
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        right: ['120'],
        top: ['240']
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '30%',
          data: [
            { value: 1048, name: '拣货区' },
            { value: 735, name: '出库区' },
            { value: 580, name: '暂存库区' },
            { value: 484, name: '进货暂存区' },
            { value: 300, name: '出货暂存区' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
    const myChart2 = echarts.init(this.$refs.box2)
    myChart2.setOption({
      title: {
        text: '入库/出库信息',
        left: 10,
        top: 10
      },
      legend: {
        // right: ['120'],
        bottom: [0]
      },
      tooltip: {},
      dataset: {
        source: [
          ['product', '入库', '出库'],
          ['Matcha Latte', 43.3, 85.8, 93.7],
          ['Milk Tea', 83.1, 73.4, 55.1],
          ['Cheese Cocoa', 86.4, 65.2, 82.5],
          ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
      },
      xAxis: { type: 'category' },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: 'bar' }, { type: 'bar' }]
    })
  }
}
</script>
<style lang="scss" scoped>
.app-main {
  margin-left: 260px;
  // background-color: skyblue;
}
.banner-mian {
  display: flex;
  width: 98%;
  height: 451px;
  // background-color: skyblue;
}
.banner-mian .left {
  width: 90%;
  height: 451px;
  // background-color: pink;
}
.banner-mian .left .banner {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 149px;
  border-radius: 6px;
  background-color: #ffb200;
}
.banner img {
  width: 146px;
  height: 148px;
}
.banner .pic {
  position: relative;
}
.banner .pic1 {
  width: 426px;
  height: 148px;
}
.banner h2 {
  position: absolute;
  bottom: 10px;
  left: 30px;
  font-weight: 400;
  font-size: 16px;
}
.banner .text {
  color: #fff;
}
.banner .text p {
  font-size: 18px;
  padding-top: 12px;
}
.banner .text .text-p {
  margin-left: 170px;
}
.totalwarehouse {
  position: relative;
}
.beijing {
  position: absolute;
  top: 20px;
  left: 260px;
  width: 147px;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  background: #f8f5f5;
  border-radius: 6px;
  opacity: 0.79;
}
.banner .headsculpture {
  position: absolute;
  top: 30px;
  left: 35px;
  width: 62px;
  height: 62px;
}
.banner-mian .left .backlog-info {
  border-radius: 6px;
  margin-top: 20px;
  width: 100%;
  height: 282px;
  background-color: #fff;
  box-shadow: 2px 0 6px 0 rgb(144 142 142 / 13%);
}
.banner-mian .right {
  margin-left: 30px;
  width: 22%;
  height: 451px;
  border-radius: 6px;
  // background-color: salmon;
  box-shadow: 2px 0 6px 0 rgb(144 142 142 / 13%);
}
.backlog-info h3 {
  height: 30px;
  font-size: 16px;
  margin-left: 22px;
  line-height: 30px;
  padding-top: 6px;
}
.info-list {
  display: flex;
}
.info-list .list {
  padding-top: 20px;
  padding-left: 19px;
  width: 28%;
  height: 200px;
  margin-left: 20px;
  border-radius: 6px;
  background: #fbf7f7;
}
.list .span-list {
  padding-left: 20px;
  padding-top: 20px;
  width: 60px;
  height: 30px;
  color: #332929;
  font-size: 16px;
}
.list .xinzeng {
  margin-top: 60px;
  color: #887e7e;
  font-size: 14px;
}
.mission-navigation {
  margin-top: 20px;
  width: 98%;
  height: 188px;
  border-radius: 6px;
  background-color: #fff;
}
.mission-navigation h3 {
  font-size: 16px;
  height: 30px;
  margin-left: 22px;
  line-height: 30px;
  padding-top: 10px;
}
.mission-navigation .mission {
  display: flex;
}
.mission-navigation .navigation {
  width: 17.8%;
  height: 100px;
  margin-left: 22px;
  border-radius: 6px;
  padding-left: 20px;
  padding-top: 24px;
  background-color: #fbf7f7;
}
.Intothewarehouse {
  margin-top: 20px;
  width: 98%;
  height: 430px;
  border-radius: 6px;
  background-color: bisque;
}
.servicecondition {
  display: flex;
  margin-top: 20px;
  width: 98%;
  height: 390px;
  border-radius: 6px;
  // background-color: plum;
}
.servicecondition-left {
  width: 30%;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 2px 0 6px 0 rgb(144 142 142 / 13%);
}
.servicecondition-right {
  margin-left: 30px;
  width: 68%;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 2px 0 6px 0 rgb(144 142 142 / 13%);
}
.box-btn {
  margin-left: 900px;
  padding-top: 20px;
}
.btn {
  width: 70px;
  height: 40px;
  border: 1px solid #ccc;
}
</style>
